<template>
    <div id="login-page">
      <div class="login-container">
        <h1>登录页面</h1>
        <form @submit.prevent="handleSubmit">
          <div class="input-group">
            <label for="username">用户名</label>
            <input
              type="text"
              id="username"
              v-model="username"
              placeholder="请输入用户名"
              required
              autofocus
            />
          </div>
  
          <div class="input-group">
            <label for="password">密码</label>
            <input
              type="password"
              id="password"
              v-model="password"
              placeholder="请输入密码"
              required
            />
          </div>
  
          <button type="submit" class="login-btn" :disabled="isLoading">
            <span v-if="isLoading">登录中...</span>
            <span v-else>登录</span>
          </button>
        </form>
  
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    name: 'LoginPage',
    data() {
      return {
        username: '',
        password: '',
        isLoading: false,
        errorMessage: '',
      };
    },
    methods: {
      handleSubmit() {
        this.errorMessage = ''; // 清除之前的错误信息
        if (!this.username || !this.password) {
          this.errorMessage = '用户名和密码不能为空';
          return;
        }
  
        // 模拟登录请求，展示 loading 状态
        this.isLoading = true;
  
        // 模拟登录请求（例如：API 请求）
        setTimeout(async () => {
          // 假设用户名和密码正确是 "user" 和 "password"
          if (this.username&&this.password) {
            const response = await axios.post("http://localhost:8080/login",{
                username: this.username,
                password: this.password,
            });
            console.log(response.data.success);
            console.log(response.data);
            if(response.data.success){
                // 登录成功后跳转到商品列表页面
                const userInfo = {
                                    username: response.data.success,
                                    token: 'abc123',
                                };
                localStorage.setItem('userInfo', JSON.stringify(userInfo));
                this.$router.push({ name: 'ProductList' });
            }else{
                this.errorMessage = '用户名或密码错误';     
            }
          } else {
            // 登录失败，显示错误信息
            this.errorMessage = '用户名或密码错误';
          }
          this.isLoading = false; // 隐藏 loading 状态
        }, 1000); // 模拟延迟 1 秒
      },
    },
  };
  </script>

  <style scoped>
  #login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
  }
  
  .login-container {
    width: 300px;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }
  
  h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .input-group {
    margin-bottom: 15px;
  }
  
  .input-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  button.login-btn {
    width: 100%;
    padding: 10px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
  }
  
  button.login-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  button.login-btn:hover:enabled {
    background-color: #38a165;
  }
  
  .error-message {
    color: red;
    text-align: center;
    margin-top: 15px;
  }
  </style>
  